<template>
  <div v-if="showPage">
    <div class="header">
      <img class="bg-img" :src="picPre + baseInfo.background_img" :lazy-load="true" mode="scaleToFill" alt="">
      <div class="bg-img"></div>
      <div class="p-info">
        <div class="content">
          <img :src="picPre + baseInfo.pic" :lazy-load="true" mode="widthFix" alt="">
          <div>
            <div class="title">{{baseInfo.title}}</div>
            <div class="des">{{baseInfo.area}}<span class="tags" v-for="(item, index) in baseInfo.tags" :key="index">{{item.title}}</span></div>
            <div class="des" v-if="baseInfo.movie_time">片长：{{baseInfo.movie_time}}分钟</div>
            <div class="des">上映时间：{{baseInfo.release_time}}</div>
          </div>
        </div>
        <div class="btn">
          <div><span class="iconfont iconyanjing1"></span>{{baseInfo.click_num}}人</div>
          <div ﻿@tap="collect()"><span class="iconfont iconshoucang1" style="font-size: 26rpx;" :class="isCollect === 1 ? 'active': ''"></span>收藏</div>
        </div>
      </div>

    </div>
    <div class="brief">
      <rich-text :nodes="baseInfo.introduction"></rich-text>
    </div>
    <div v-if="ac.length > 0">
      <div class="line"></div>
      <h1>演职员</h1>
      <div class="ac-box">
        <scroll-view scroll-x="true" style="width: 100%" enable-flex="true" class="ac-wrapper">
          <div class="ac-item" v-for="(item, index) in ac" :key="index">
            <img :lazy-load="true" :src="picPre + item.avatar" alt="" mode="aspectFill">
            <div class="name">{{item.name}}</div>
            <div class="ac">{{item.position !== '导演' ? '饰:' + item.role:'导演'}}</div>
          </div>
        </scroll-view>
      </div>
    </div>
    <div v-if="poster.length > 0">
      <div class="line"></div>
      <h1>项目海报</h1>
      <div class="poster-box">
        <scroll-view scroll-x="true" style="width: 100%" enable-flex="true" class="poster-wrapper">
          <div class="poster-item" v-for="(item, index) in poster" :key="index" ﻿@tap="previewImg(index)">
            <img :lazy-load="true" :src="picPre + item.picture" alt="" mode="aspectFill">
          </div>
        </scroll-view>
      </div>

    </div>
    <div v-if="videoList.length > 0">
      <h1>相关视频</h1>
      <div class="poster-box">
        <scroll-view scroll-x="true" style="width: 100%" enable-flex="true" class="poster-wrapper">
          <div class="poster-item" v-for="(item, index) in videoList" :key="index">
            <video :src="picPre + item.video" alt=""></video>
          </div>
        </scroll-view>
      </div>
    </div>
    <div class="xuanfa">
      <h1>宣发计划</h1>
      <div>
        <rich-text :nodes="baseInfo.advertisement"></rich-text>
      </div>
    </div>
    <h1>项目分析</h1>
    <div class="analysis">
      <div class="tab">
        <span class="a1" :class="active === 1 ? 'active': ''" ﻿@tap="changeContent(1)">政策优势</span>
        <span class="a2" :class="active === 2 ? 'active': ''" ﻿@tap="changeContent(2)">题材优势</span>
        <span class="a3" :class="active === 3 ? 'active': ''" ﻿@tap="changeContent(3)">市场优势</span>
        <span class="a4" :class="active === 4 ? 'active': ''" ﻿@tap="changeContent(4)">相关案例</span>
      </div>
      <div>
        <div class="empty" v-if="!content">暂无数据</div>
        <rich-text v-else :nodes="content"></rich-text>
      </div>
    </div>
    <div v-if="trendsTotal > 0">
    <h1 ﻿@tap="goPage('/project/trends?id='+id)">项目动态 <span class="more">全部 {{ trendsTotal }}></span></h1>
    <trends :Posts="trends"></trends>
    </div>
    <div v-if="postsTotal > 0">
    <div class="line"></div>
    <h1 ﻿@tap="goPage('/movie/comment?type=project&id='+id)">用户发帖 <span class="more">全部 {{ postsTotal }}></span></h1>
    <comment :Posts="posts"></comment>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import comment from '@/components/comment/index'
  import trends from '@/components/project/trends'
  export default {
    name: "detail",
    components: {
      comment,
      trends
    },
    data() {
      let that = this;
      return {
        picPre: that.$api.picPre,
        id: '',
        active: 1,
        showPage: true,
        baseInfo: {},
        poster: [],
        ac: [],
        trends: [],
        trendsTotal: 0,
        posts: [],
        postsTotal: 0,
        videoList: [],
        content: '',
        isCollect: 2,
        loadingEnd:{
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
          moduleFive: false,
          moduleSix: false
        }
      }
    },
    methods: {
      goPage(url){
        uni.navigateTo({
        	url: url
        })
      },
      collect() {
        if (!this.isLogin) {
          let that = this;
          ﻿uni.showModal({
            title: '亲，您尚未登录，无法收藏',
            content: '前去登录吧~',
            success (res) {
              if (res.confirm) {
                ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
              }
            }
          });
        } else {
          let collection = 0
          if (this.isCollect === 2) {
            collection = 1
          } else {
            collection = 2
          }
          this.$ajax
            .post(this.$api.projectCollect, {item_id: this.id, is_collect: collection})
            .then(res => {
              this.isCollect = collection
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        }
      },
      changeContent(index) {
        this.active = index
        switch (index) {
          case 1:
            this.content = this.baseInfo.policy
            break;
          case 2:
            this.content = this.baseInfo.theme
            break;
          case 3:
            this.content = this.baseInfo.market
            break;
          case 4:
            this.content = this.baseInfo.case
            break;

        }
      },
      viewLoad(){
        this.baseInfo = {};
        this.poster = [];
        this.ac = [];
        this.trends = [];
        this.trendsTotal = 0;
        this.posts = [];
        this.postsTotal = 0;
        this.videoList = [];
        this.content = '';
        this.isCollect = 2;
        this.loadingEnd = {
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
          moduleFive: false,
          moduleSix: false
        };
        ﻿uni.showLoading({
          title: '加载中',
          mask: true
        });
        this.getInfo()
        this.getActor()
        this.getProjectPostedInfo()
        this.getProjectInfo()
        this.getProjectPosts()
        this.getProjectVideoInfo()
      },
      getInfo() {
        this.$ajax
          .post(this.$api.getProjectInfo, {project_id: this.id})
          .then(res => {
            let content = res.advertisement
            res.advertisement =  content.replace(/\<img/gi, '<img style="width:100%;height:auto" ')
            this.baseInfo = res
            this.active = 1
            this.content = this.baseInfo.policy
            this.loadingEnd.moduleOne = true
          })
          .catch(err => {
            this.loadingEnd.moduleOne = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
        if (this.isLogin) {
          this.$ajax
            .post(this.$api.getIsCollect, {project_id: this.id})
            .then(res => {
              this.isCollect = res.is_collect
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        }
      },
      getActor() {
        this.$ajax
          .post(this.$api.getProjectActor, {project_id: this.id})
          .then(res => {
            this.ac = res.data
            this.loadingEnd.moduleTwo = true
          })
          .catch(err => {
            this.loadingEnd.moduleTwo = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getProjectPostedInfo() {
        this.$ajax
          .post(this.$api.getProjectPostedInfo
            , {project_id: this.id})
          .then(res => {
            this.loadingEnd.moduleThree = true
            this.poster = res.data
          })
          .catch(err => {
            this.loadingEnd.moduleThree = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      // 获取项目动态
      getProjectInfo() {
        this.$ajax
          .post(this.$api.getProjectInformationInfo
            , {project_id: this.id, page_size: 4, page: 1})
          .then(res => {
            this.loadingEnd.moduleFour = true
            this.trends = res.data
            this.trendsTotal = res.total_count
          })
          .catch(err => {
            this.loadingEnd.moduleFour = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      // 获取项目相关发帖
      getProjectPosts() {
        this.$ajax
          .post(this.$api.getProjectPosts
            , {project_id: this.id, page_size: 3, page: 1})
          .then(res => {
            this.postsTotal = res.total_count
            this.posts = res.data
            this.loadingEnd.moduleFive = true
          })
          .catch(err => {
            this.loadingEnd.moduleFive = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      // 获取项目相关视频
      getProjectVideoInfo() {
        this.$ajax
          .post(this.$api.getProjectVideoInfo
            , {project_id: this.id, page_size: 10, page: 1})
          .then(res => {
            this.loadingEnd.moduleSix = true
            this.videoList = res.data
          })
          .catch(err => {
            this.loadingEnd.moduleSix = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      previewImg(ind) {
        let that = this;
        let arr = [];
        for (let i = 0; i < this.poster.length; i++) {
          arr.push(this.$api.picPre + this.poster[i].picture)
        }
        //最主要就是调用这个
        ﻿uni.previewImage({
          current: that.$api.picPre + that.poster[ind].picture,
          urls: arr
        });
      },
    },
    computed: {
      ...mapState([
        'isLogin'
      ]),
      hideLoading() {
        if (this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo && this.loadingEnd.moduleThree && this.loadingEnd.moduleFour && this.loadingEnd.moduleFive && this.loadingEnd.moduleSix) {
          setTimeout(function () {
            ﻿uni.hideLoading()
            }, 800)
        }
      }
    },
    ﻿onShareAppMessage(res){
  ﻿this.$common.share()
  },
    onLoad(res) {
      this.id = res.id;
      ﻿uni.showShareMenu({
        withShareTicket: true
      });
    },
    onHide(){
      this.showPage= false;
    },
    onShow(){
      this.showPage= true;
      this.viewLoad();
    },
  }
</script>

<style scoped>
  .tags:first-child:before{
    content: ' / ';
  }
  .tags:last-child:after{
    content: '';
  }
  .tags:after{
    content: ' ';
  }
.header{
  position: relative;
}
.p-info{
  padding: 20rpx 30rpx 30rpx 30rpx;
  z-index: 10;
  position: relative;
}
.header .content{
  display: flex;
}
.bg-img{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(2px);
  background-color: rgba(0,0,0,0.3);
  z-index: 5;
}
.header .title{
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  margin-bottom: 56rpx;
}
.header .des{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(230,230,230,1);
  line-height:34rpx;
}
.header .content img{
  width: 220rpx;
  margin-right: 31rpx;
  border-radius: 6rpx;
}
.header .btn{
  display: flex;
  margin-top: 30rpx;
}
.header .btn div{
  flex: 1;
  background:rgba(179,179,179,0.3);
  border-radius:6rpx;
  padding: 19rpx 0;
  color:rgba(229,229,229,1);
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:500;
  text-align: center;
}
.header .btn div:first-child{
  margin-right: 22rpx;
}
.header .btn .iconfont{
  font-size: 22rpx;
  margin-right: 9rpx;
}
  .brief{
    padding: 39rpx 30rpx 11rpx;
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(50,50,50,1);
    line-height:39rpx;
  }
  .line{
    margin:0 30rpx;
    background:rgba(247,247,247,1);
    border-radius:4rpx;
    height:14rpx;
  }
  h1{
    margin: 39rpx 30rpx 0 30rpx;
    font-size:34rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    position: relative;
  }
  h1 .more{
    position: absolute;
    right: 0;
    font-size:24rpx;
    line-height: 34rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(150,150,150,1);
  }
  .ac-box{
    padding: 29rpx 0 29rpx 13rpx;
    width: 100%;
    box-sizing: border-box;
  }
  .ac-wrapper{
    /*display: flex;*/
    /*overflow-x: auto;*/
    white-space: nowrap;
  }
  .ac-item{
    display: inline-block;
    padding: 0 17rpx 0 17rpx;
    text-align: center;
  }
.ac-item img{
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
}
 .active{
    color: red;
}
.ac-item .name{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(50,50,50,1);
  }
.ac-item .ac{
  font-size:22rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(150,150,150,1);
}
.poster-box{
  padding: 0 30rpx;
  width: 100%;
  box-sizing: border-box;
}
  .poster-wrapper{
    white-space: nowrap;
    padding: 30rpx 0;
    /*display: flex;*/
    /*overflow-x: auto;*/
    border-bottom: 1rpx solid #EEEEEE;
  }
.poster-wrapper .poster-item{
  margin-right: 19rpx;
  position: relative;
  border-radius: 10rpx;
  display: inline-block;
}
  .poster-item img{
    width: 335rpx;
    height: 193rpx;
    border-radius: 10rpx;
  }
  .poster-item video{
    width: 335rpx;
    height: 193rpx;
    border-radius: 10rpx;
  }

.poster-item > div > .iconbofangkaobei1 {
  font-size: 68rpx;
  color: white;
}
.xuanfa{
  margin: 0 30rpx;
  padding: 32rpx 20rpx 30rpx 20rpx;
  background:rgba(247,247,247,1);
  border:1rpx solid rgba(238,238,238,1);
  border-radius:10rpx;
}
  .xuanfa h1{
    margin: 0 0 27rpx 0;
  }
.xuanfa p{
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(50,50,50,1);
  margin-bottom: 20rpx;
}
.xuanfa img{
  width: 100%;
}
  .analysis{
    padding: 76rpx 21rpx 28rpx 20rpx;
    margin: 67rpx 30rpx 30rpx;
    background:rgba(247,247,247,1);
    border:1px solid rgba(238,238,238,1);
    border-radius:10px;
    position: relative;
  }
  .analysis .tab{
    display: flex;
    position: absolute;
    top: -33rpx;
    width: calc(100% - 40rpx);
  }
.analysis .tab span{
  flex: 1;
  padding: 28rpx 0;
  text-align: center;
  font-size:26rpx;
}
.analysis .tab .a1{
  background:rgba(253,249,238,1);
  border:1px solid rgba(239,232,191,1);
  border-radius:6rpx;
  color:rgba(228,125,57,1);
  margin-right: 20rpx;
}
.analysis .tab .a2{
  background:rgba(248,249,253,1);
  border:1rpx solid rgba(211,225,233,1);
  border-radius:6rpx;
  color:rgba(107,126,213,1);
  margin-right: 20rpx;
}
.analysis .tab .a3{
  background:rgba(248,252,255,1);
  border:1rpx solid rgba(202,226,226,1);
  border-radius:6rpx;
  color:rgba(120,195,214,1);
  margin-right: 20rpx;
}
.analysis .tab .a4{
  background:rgba(253,238,248,1);
  border:1rpx solid rgba(239,191,223,1);
  border-radius:6rpx;
  color:rgba(214,120,186,1);
}
.analysis .tab .active{
  transform: scale(1.1);
}
  .empty{
    text-align: center;
    margin: 16rpx;
  }
</style>
